<template>
    <div>
        <div data-role="page" id="pagetwo">
    <a href="#pageone" data-transition="slide" data-direction="reverse" class="backTo ui-link">返回</a>
    <div class="rm-comment">
        <span class="comment-title">全部评论（66）</span>
        <ul class="comment-ul">
            <li class="list-li">
                <div class="left">
                    <img src="../../assets/personal/images/touxiang.png" alt="" class="touxiang">
                </div>
                <div class="center">
                    <p class="name">木子</p>
                    <p class="time">11小时前</p>
                    <p class="text">共享新零售期待</p>
                </div>
                <div class="right">
                    <a href="#pagethree" data-transition="slide"><i class="icon-pl"></i></a>

                    <span class="num-pl">评论</span>
                    <i class="icon"></i>
                    <span class="num">点赞</span>
                </div>
            </li>
            <li class="list-li">
                <div class="left">
                    <img src="../../assets/personal/images/touxiang.png" alt="" class="touxiang">
                </div>
                <div class="center">
                    <p class="name">木子</p>
                    <p class="time">11小时前</p>
                    <p class="text">共享新零售期待</p>
                </div>
                <div class="right">
                    <a href="#pagethree" data-transition="slide"><i class="icon-pl"></i></a>
                    <span class="num-pl">评论</span>
                    <i class="icon"></i>
                    <span class="num">点赞</span>
                </div>
            </li>
        </ul>
    </div>
</div>

<div data-role="page" id="pagethree">
    <div class="pagethree-con">
       <div class="send-comment-info">
        <input type="text" class="send-input" placeholder="回复楼主">
        <a href="javascript:void (0)" class="send-sub">发送</a>
    </div>
    </div>
</div>
<router-link  class="backTo" data-ajax="false" :to="{name:'headline'}">返回</router-link>
    </div>
</template>
<script>
export default {
     mounted(){
         $(function () {
    $(".rm-comment .comment-ul .list-li .right .icon").click(function () {
        if($(this).hasClass('active')){
            $(this).siblings(".num").html("点赞");
            $(this).removeClass("active");
            $(this).siblings(".num").removeClass("active");
        }else{
            $(this).addClass("active");
            $(this).siblings(".num").addClass("active");
            var num = 10;
            $(this).siblings(".num").html(num+1);
        }

    })

    $(".comment-info .zan-info .icon-num .icon").click(function () {
        if($(this).hasClass('active')){
            $(this).siblings(".num").html("32");
            $(this).removeClass("active");
            $(this).siblings(".num").removeClass("active");
        }else{
            $(this).addClass("active");
            $(this).siblings(".num").addClass("active");
            var num = 32;
            $(this).siblings(".num").html(num+1);
        }
    });

    $(".send-comment-info .send-input").focus(function () {
         if($(this).value!=""){
             $(".send-comment-info .send-sub").show();
         }else {
             $(".send-comment-info .send-sub").hide();
         }
    });
    $(".rm-comment .comment-ul .list-li .right .icon-pl").click(function () {
        $(".pagethree-con input").trigger("click").focus();
    });
})
     }
}
</script>
